<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>酒店官网</title>
		<link rel="stylesheet" href="../styles/base.css" />
		<link rel="stylesheet" href="../styles/index.css" />
	</head>
	<body>
		<div id="box">
			<div class="top">
				<div class="top-left fl">
					<i class="fa fa-sun-o" aria-hidden="true"></i>
					<span>Mon - Sat 8.00 - 18.00. Sunday CLOSED</span>
				</div>
				<div class="top-right fr">
					<i class="fa fa-phone"></i>
					<span>Tel No. (+001) 123-456-789</span>
				</div>
			</div>
			<div class="nav">
				<div class="nav-log">
					<img src="../img/logo.png" />
				</div>
				<div class="nav-right">
					<ul>
						<li>
							<a href="javascript:;">Home</a>
						</li>
						<li>
							<a href="javascript:;">Home</a>
						</li>
						<li>
							<a href="javascript:;">Home</a>
						</li>
						<li>
							<a href="javascript:;">Home</a>
						</li>
						<li>
							<a href="javascript:;">Home</a>
						</li>
						<li>
							<a href="javascript:;">Home</a>
						</li>
					</ul>
				</div>
			</div>
			<div class="carousel">
				<img src="../img/slides/1.jpg" />
			</div>
			<div class="container">
				<div class="nav-list">
					<ul>
						<li>
							<div class="nav-content">
								<div class="content-icon">
									<i class="fa fa-home"></i>
								</div>
								<div class="content-words">
									<h4>NEW PROJECTS</h4>
									<p>ipsum dolor sitamet, consec tetur adipisicing elit.
										Dolores quae porro consequatur aliquam, incidunt eius
										magni provident
									</p>
								</div>
							</div>
						</li>
						<li>
							<div class="nav-content">
								<div class="content-icon">
									<i class="fa fa-home"></i>
								</div>
								<div class="content-words">
									<h4>NEW PROJECTS</h4>
									<p>ipsum dolor sitamet, consec tetur adipisicing elit.
										Dolores quae porro consequatur aliquam, incidunt eius
										magni provident
									</p>
								</div>
							</div>
						</li>
						<li>
							<div class="nav-content">
								<div class="content-icon">
									<i class="fa fa-home"></i>
								</div>
								<div class="content-words">
									<h4>NEW PROJECTS</h4>
									<p>ipsum dolor sitamet, consec tetur adipisicing elit.
										Dolores quae porro consequatur aliquam, incidunt eius
										magni provident
									</p>
								</div>
							</div>
						</li>
						<li>
							<div class="nav-content">
								<div class="content-icon">
									<i class="fa fa-home"></i>
								</div>
								<div class="content-words">
									<h4>NEW PROJECTS</h4>
									<p>ipsum dolor sitamet, consec tetur adipisicing elit.
										Dolores quae porro consequatur aliquam, incidunt eius
										magni provident
									</p>
								</div>
							</div>
						</li>
					</ul>
				</div>
				<div class="box-hotel">
					<div class="box-title">
						<h2><span>RECENT</span>PROPERTIES</h2>
						<p class="box-title-memo">Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada
							Pellentesque
							ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
					</div>
					<div class="box-content">
						<div class="hotel-item fl">
							<img src="../img/img1.jpg" class="hotel-item-img">
							<h4 class="hotel-item-title">Apartments</h4>
							<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
								Dolores quae porro consequatur aliquam, incidunt eius magni provident</p>
						</div>
						<div class="hotel-item fl">
							<img src="../img/img1.jpg" class="hotel-item-img">
							<h4 class="hotel-item-title">Apartments</h4>
							<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
								Dolores quae porro consequatur aliquam, incidunt eius magni provident</p>
						</div>
						<div class="hotel-item fl">
							<img src="../img/img1.jpg" class="hotel-item-img">
							<h4 class="hotel-item-title">Apartments</h4>
							<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
								Dolores quae porro consequatur aliquam, incidunt eius magni provident</p>
						</div>
						<div class="hotel-item fl">
							<img src="../img/img1.jpg" class="hotel-item-img">
							<h4 class="hotel-item-title">Apartments</h4>
							<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
								Dolores quae porro consequatur aliquam, incidunt eius magni provident</p>
						</div>
					</div>
				</div>
			</div>
			<div class="container bg-gray">
				<div class="box-hotel pd">
					<div class="box-title">
						<h2><span>RECENT</span>PROPERTIES</h2>
						<p class="box-title-memo">Curabitur aliquet quam id dui posuere blandit. Donec sollicitudin molestie malesuada
							Pellentesque
							ipsum id orci porta dapibus. Vivamus suscipit tortor eget felis porttitor volutpat.</p>
					</div>
					<div class="box-content">
						<div class="hotel-item fl big">
							<img src="../img/img6.jpg" class="hotel-item-img">
							<h4 class="hotel-item-title">Apartments</h4>
							<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
								Dolores quae porro consequatur aliquam, incidunt eius magni provident</p>
						</div>
						<div class="hotel-item fl big">
							<img src="../img/img2.jpg" class="hotel-item-img">
							<h4 class="hotel-item-title">Apartments</h4>
							<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
								Dolores quae porro consequatur aliquam, incidunt eius magni provident</p>
						</div>
						<div class="hotel-item fl big">
							<img src="../img/img1.jpg" class="hotel-item-img">
							<h4 class="hotel-item-title">Apartments</h4>
							<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
								Dolores quae porro consequatur aliquam, incidunt eius magni provident</p>
						</div>
						<div class="hotel-item fl big">
							<img src="../img/img5.jpg" class="hotel-item-img">
							<h4 class="hotel-item-title">Apartments</h4>
							<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
								Dolores quae porro consequatur aliquam, incidunt eius magni provident</p>
						</div>
						<div class="hotel-item fl big">
							<img src="../img/img4.jpg" class="hotel-item-img">
							<h4 class="hotel-item-title">Apartments</h4>
							<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
								Dolores quae porro consequatur aliquam, incidunt eius magni provident</p>
						</div>
						<div class="hotel-item fl big">
							<img src="../img/img3.jpg" class="hotel-item-img">
							<h4 class="hotel-item-title">Apartments</h4>
							<p class="hotel-item-content">Lorem ipsum dolor sit amet, consectetur adipisicing elit.
								Dolores quae porro consequatur aliquam, incidunt eius magni provident</p>
						</div>
					</div>
				</div>
			</div>
			<div class="container">
				<div class="box-hotel pd">
					<div class="box-title">
						<h2><span>RECENT</span>PROPERTIES</h2>
						<p class="box-title-memo">
							Curabitur aliquet quam id dui posuere blandit.
							Donec sollicitudin molestie malesuada Pellentesque
							ipsum id orci porta dapibus.
							Vivamus suscipit tortor eget felis porttitor volutpat.</p>
					</div>
					<div class="box-content">
						<div class="box-content-left fl">
							<p class="title">
								Grids is a responsive Multipurpose Template.
								Lorem ipsum dolor sit amet, consectetur adipiscing elit.
								Curabitur aliquet quam id dui posuere blandit.
								Donec sollicitudin molestie malesuada. Pellentesque in ipsum id orci porta dapibus.
								Vivamus suscipit tortor eget felis porttitor volutpat.
							</p>
							<ul class="option">
								<li><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</li>
								<li><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</li>
								<li><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</li>
								<li><i class="fa fa-angle-right"></i>Lorem ipsum dolor sit amet</li>
							</ul>
							<div class="btns">
								<button class="defult-btn">Learn More</button>
							</div>
						</div>
						<div class="box-content-right fl">
							<img src="../img/about.jpg">
						</div>
					</div>
				</div>
			</div>
			<div class="container bg-black mg">
				<div class="box-buttom">
					<ul>
						<li>
							<h4>Our Contact</h4>
							<p><a href="#">Latest Events</a></p>
							<p><a href="#">Latest Events</a></p>
							<p><a href="#">Latest Events</a></p>
						</li>
						<li>
							<h4>Our Contact</h4>
							<p><a href="#">Latest Events</a></p>
							<p><a href="#">Latest Events</a></p>
							<p><a href="#">Latest Events</a></p>
						</li>
						<li>
							<h4>Our Contact</h4>
							<p><a href="#">Latest Events</a></p>
							<p><a href="#">Latest Events</a></p>
							<p><a href="#">Latest Events</a></p>
						</li>
						<li>
							<h4>Our Contact</h4>
							<p><a href="#">Latest Events</a></p>
							<p><a href="#">Latest Events</a></p>
							<p><a href="#">Latest Events</a></p>
						</li>
					</ul>
					<div class="foot">
						<p class="foot-copyright fl">Copyright  2017.Company name All rights reserved.</p>
						<div class="font-icons fr">
							<i class="fa fa-facebook"></i>
							<i class="fa fa-facebook"></i>
							<i class="fa fa-facebook"></i>
							<i class="fa fa-facebook"></i>
						</div>
					</div>
					
				</div>
			</div>
		</div>
		<script src="../js/index.js"></script>
	</body>
</html>
